<template>
  <view class="container">
    <!-- 加载状态 -->
    <view class="loading-container" v-if="loading">
      <image src="/static/loading.png" class="loading-image"></image>
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 错误状态 -->
    <view class="error-container" v-else-if="error">
      <image src="/static/error.png" class="error-image"></image>
      <text class="error-text">{{errorMsg}}</text>
      <button class="retry-btn" @click="loadCultureDetail">重试</button>
    </view>

    <!-- 内容区域 -->
    <block v-else>
      <!-- 头部图片 -->
      <image class="cover-image" :src="culture.coverImage" mode="aspectFill"></image>

      <!-- 基本信息 -->
      <view class="content-wrapper">
        <view class="title-section">
          <text class="title">{{culture.title}}</text>
          <view class="tags">
            <text class="tag" v-for="(tag, index) in culture.tags" :key="index">{{tag}}</text>
          </view>
          
          <!-- 浏览量展示（仅显示，不交互） -->
          <view class="view-count-display">
            <image src="/static/view.png" class="small-icon"></image>
            <text>{{culture.viewCount}} 浏览</text>
          </view>
        </view>

        <!-- 文化内容 -->
        <view class="content-section">
          <rich-text :nodes="culture.content"></rich-text>
        </view>

        <!-- 相关图片 -->
        <view class="image-section" v-if="culture.images && culture.images.length > 0">
          <view class="section-title">相关图片</view>
          <view class="image-grid">
            <image 
              v-for="(img, index) in culture.images" 
              :key="index"
              :src="img"
              class="grid-image"
              mode="aspectFill"
              @click="previewImage(culture.images, index)"
            ></image>
          </view>
        </view>

        <!-- 相关推荐 -->
        <view class="related-section" v-if="culture.related && culture.related.length > 0">
          <view class="section-title">相关推荐</view>
          <view class="related-list">
            <view 
              class="related-item" 
              v-for="(item, index) in culture.related" 
              :key="index"
              @click="goToDetail(item.id)"
            >
              <image :src="item.coverImage" class="related-image" mode="aspectFill"></image>
              <text class="related-title">{{item.title}}</text>
            </view>
          </view>
        </view>
        
        <!-- 底部留白，防止内容被底部交互栏遮挡 -->
        <view class="bottom-space"></view>
      </view>
      
      <!-- 底部固定交互栏 -->
      <view class="fixed-interaction-bar">
        <view class="interaction-item">
          <image src="/static/view.png" class="icon"></image>
          <text>{{culture.viewCount}}</text>
        </view>
        <view class="interaction-item" @click="toggleLike">
          <image :src="culture.isLiked ? '/static/liked.png' : '/static/like.png'" class="icon"></image>
          <text>{{culture.likeCount}}</text>
        </view>
        <view class="interaction-item" @click="toggleCollect">
          <image :src="culture.isCollected ? '/static/collected.png' : '/static/collect.png'" class="icon"></image>
          <text>收藏</text>
        </view>
        <view class="interaction-item" @click="share">
          <image src="/static/share.png" class="icon"></image>
          <text>分享</text>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cultureId: '',
      loading: true,
      error: false,
      errorMsg: '加载失败，请重试',
      culture: {
        id: '1',
        title: '沙扒湾渔村文化',
        coverImage: '/static/图片.jpg',
        tags: ['历史文化', '渔村', '传统'],
        viewCount: 1280,
        likeCount: 368,
        isLiked: false,
        isCollected: false,
        content: `
          <div style="font-size: 28rpx; color: #333; line-height: 1.8;">
            <p>沙扒湾渔村有着悠久的渔业文化传统，世代以海为生的渔民们创造了独特的生活方式和文化习俗。</p>
            <p>渔村的历史可以追溯到明朝时期，当时这里就是重要的渔业生产基地。渔民们采用传统的捕鱼方式，
            利用潮汐规律和季风变化来安排作业时间。每当春秋两季渔汛来临，整个渔村都会热闹非凡。</p>
            <p>渔民们还保留着许多独特的习俗，比如在出海前要举行祭海仪式，祈求平安丰收。每年农历三月初三的
            渔民节更是渔村最重要的传统节日，届时会有盛大的庆典活动。</p>
            <p>随着时代的发展，虽然现代化的渔业生产方式已经取代了传统作业，但渔村的文化传统仍在传承。
            现在的沙扒湾不仅是重要的渔业生产基地，也是展示渔村文化的重要窗口。</p>
          </div>
        `,
        images: [
          '/static/图片.jpg',
          '/static/图片.jpg',
          '/static/图片.jpg',
          '/static/图片.jpg'
        ],
        related: [
          {
            id: '2',
            title: '沙扒湾渔民节',
            coverImage: '/static/图片.jpg'
          },
          {
            id: '3',
            title: '沙扒湾民间艺术',
            coverImage: '/static/图片.jpg'
          },
          {
            id: '4',
            title: '沙扒湾民俗风情',
            coverImage: '/static/图片.jpg'
          }
        ]
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.cultureId = options.id;
      this.loadCultureDetail();
    }
    
    // 设置分享参数
    uni.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    });
  },
  methods: {
    // 加载文化详情
    loadCultureDetail() {
      this.loading = true;
      this.error = false;
      
      setTimeout(() => {
        // 实际项目中这里应该请求后端API
        this.loading = false;
      }, 800);
    },
    
    // 点赞
    toggleLike() {
      if (!this.checkLogin()) return;
      
      this.culture.isLiked = !this.culture.isLiked;
      if (this.culture.isLiked) {
        this.culture.likeCount++;
      } else {
        this.culture.likeCount--;
      }
      
      // 实际项目中这里应该调用API更新点赞状态
    },
    
    // 收藏
    toggleCollect() {
      if (!this.checkLogin()) return;
      
      this.culture.isCollected = !this.culture.isCollected;
      uni.showToast({
        title: this.culture.isCollected ? '收藏成功' : '已取消收藏',
        icon: 'none'
      });
      
      // 实际项目中这里应该调用API更新收藏状态
    },
    
    // 分享
    share() {
      uni.showToast({
        title: '点击右上角分享给好友',
        icon: 'none'
      });
    },
    
    // 预览图片
    previewImage(images, current) {
      uni.previewImage({
        urls: images,
        current: images[current]
      });
    },
    
    // 跳转到其他文化详情
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/culture/detail?id=${id}`
      });
    },
    
    // 检查登录状态
    checkLogin() {
      const userInfo = uni.getStorageSync('userInfo');
      if (!userInfo) {
        uni.showModal({
          title: '提示',
          content: '请先登录',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/login/index'
              });
            }
          }
        });
        return false;
      }
      return true;
    }
  },
  onShareAppMessage() {
    return {
      title: this.culture.title,
      path: `/pages/culture/detail?id=${this.cultureId}`,
      imageUrl: this.culture.coverImage
    }
  },
  onShareTimeline() {
    return {
      title: this.culture.title,
      query: `id=${this.cultureId}`,
      imageUrl: this.culture.coverImage
    }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 100rpx; /* 为底部交互栏留出空间 */
}

.loading-container, .error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.loading-image, .error-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.loading-text, .error-text {
  font-size: 28rpx;
  color: #999;
}

.retry-btn {
  margin-top: 20rpx;
  background: #f0f0f0;
  color: #666;
  font-size: 28rpx;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
}

.cover-image {
  width: 100%;
  height: 400rpx;
}

.content-wrapper {
  margin-top: -50rpx;
  border-radius: 40rpx 40rpx 0 0;
  background-color: #fff;
  padding: 40rpx 30rpx;
  position: relative;
}

.title-section {
  margin-bottom: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15rpx;
}

.tag {
  font-size: 24rpx;
  color: #1296db;
  background-color: rgba(18, 150, 219, 0.1);
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  margin-right: 15rpx;
  margin-bottom: 10rpx;
}

.view-count-display {
  display: flex;
  align-items: center;
  margin-top: 15rpx;
  font-size: 24rpx;
  color: #999;
}

.small-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 8rpx;
}

.content-section {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  padding-left: 15rpx;
  border-left: 8rpx solid #1296db;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10rpx;
  margin-bottom: 40rpx;
}

.grid-image {
  width: 100%;
  height: 220rpx;
  border-radius: 8rpx;
}

.related-list {
  display: flex;
  overflow-x: auto;
  margin: 0 -30rpx;
  padding: 0 30rpx;
}

.related-item {
  flex-shrink: 0;
  width: 300rpx;
  margin-right: 20rpx;
}

.related-image {
  width: 100%;
  height: 180rpx;
  border-radius: 8rpx;
  margin-bottom: 10rpx;
}

.related-title {
  font-size: 28rpx;
  color: #333;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 底部交互栏样式 */
.fixed-interaction-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.interaction-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10rpx 0;
}

.icon {
  width: 40rpx;
  height: 40rpx;
  margin-bottom: 5rpx;
}

.interaction-item text {
  font-size: 24rpx;
  color: #666;
}

.bottom-space {
  height: 80rpx;
}
</style> 